<template>
  <section class="contact-section">
    <div class="container">
      <div class="contact-mail" v-if="contactData1">
        <h3 class="title">CONTACT US</h3>
        <div class="contact-w3ls">
          <p class="addr1">{{ contactData1.fullContactAddress }}</p>
          <p class="addr2">
            {{ contactData1.telList[0].tel }}|
            <a :href="`mailto:${contactData1.emailList[0].email}`">
              {{ contactData1.emailList[0].email }}
            </a>
          </p>
          <ul class="social-icons2">
            <template
              v-for="network in sharing.networks"
              :key="network.network"
            >
              <li :style="{ backgroundColor: network.color }">
                <a :href="network.url" target="_blank">
                  <i :class="network.icon"></i>
                </a>
              </li>
            </template>
          </ul>
        </div>
        <a-form
          :noStyle="true"
          class="contact-form"
          ref="formRef"
          :model="formData"
        >
          <a-row :gutter="24">
            <a-col :xs="24" :sm="24" :md="8">
              <a-form-item name="name" :rules="formRules.name">
                <a-input v-model:value="formData.name" placeholder="YOUR NAME*">
                  <template #prefix>
                    <i class="fa-solid fa-user"></i>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="8">
              <a-form-item name="phone" :rules="formRules.phone">
                <a-input
                  v-model:value="formData.phone"
                  placeholder="Your Phone*"
                >
                  <template #prefix>
                    <i class="fa-solid fa-phone"></i>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="8">
              <a-form-item name="email" :rules="formRules.email">
                <a-input
                  v-model:value="formData.email"
                  placeholder="Your Email*"
                >
                  <template #prefix>
                    <i class="fa-solid fa-envelope"></i>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="24">
              <a-form-item name="from" :rules="formRules.from">
                <a-input
                  v-model:value="formData.from"
                  placeholder="Your Place*"
                >
                  <template #prefix>
                    <i class="fa-solid fa-location-dot"></i>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="subject" :rules="formRules.subject">
                <a-input
                  v-model:value="formData.subject"
                  placeholder="Your Subject*"
                >
                  <template #prefix>
                    <i class="fa-solid fa-message"></i>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="message" :rules="formRules.message">
                <a-textarea
                  v-model:value="formData.message"
                  placeholder="Enter your message*"
                >
                  <template #prefix>
                    <i class="fa-solid fa-message"></i>
                  </template>
                </a-textarea>
              </a-form-item>
            </a-col>
            <!-- 
              <a-col :xs="24" :sm="24" :md="8">
                <a-form-item name="quiz" :rules="formRules.quiz">
                <a-input
                  v-model:value="formData.quiz"
                  placeholder="1+1="
                ></a-input>
              </a-form-item> 
            </a-col> 
            -->
            <a-col :span="24" class="text-center">
              <button
                type="button"
                @click.prevent="submitContact"
                class="btn-outline2"
              >
                Submit now
              </button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </section>
</template>

<script>
import { addContact } from "@/api/index";

import BaseInfo from "@/datas/BaseInfo.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  ref,
  computed,
} from "vue";

import { Modal, message } from "ant-design-vue";

export default {
  name: "ContactUs",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      //
      formData: {
        name: "",
        from: "",
        phone: "",
        email: "",
        subject: "",
        message: "",
        quiz: "",
      },
      formRules: {
        name: [{ required: true, message: "Please input your name!" }],
        from: [{ required: true, message: "Please input your address!" }],
        phone: [{ required: true, message: "Please input your tel!" }],
        email: [
          { required: true, message: "Please input your email!" },
          { type: "email" },
        ],
        subject: [{ required: true, message: "Please input your subject!" }],
        message: [{ required: false, message: "Please input your message!" }],
        quiz: [{ required: true, message: "Please input your answer!" }],
      },
      //
      // contactData: BaseInfo.footerData.contactData,
      contactData1: computed(() => {
        return proxy.$store.getters.footerData.contactData;
      }),
      //
      sharing: BaseInfo.sharing,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const formRef = ref();
    const methods = {
      async submitContact(value) {
        try {
          const values = await formRef.value.validateFields();
          var params = {
            "your-name": values.name,
            "your-email": values.email,
            "your-subject": values.subject,
            "your-message": values.message,
            "your-tel": values.phone,
            "your-address": values.from,
            "math-quiz": 2,
            "_wpcf7_quiz_answer_math-quiz": "b3c6d6bec17a7cab972dd812e75cd99e",
          };
          console.log("Success:", params);
          Modal.confirm({
            title: "Confirm",
            // okText: "确认",
            // cancelText: "取消",
            onOk() {
              addContact(params)
                .then((res) => {
                  if (res.message.includes("谢谢")) {
                    message.success("Success");
                    formRef.value.resetFields();
                  } else {
                    message.error("Fail");
                  }
                })
                .catch(() => {
                  message.error("Exception");
                });
            },
            onCancel() {},
          });
        } catch (errorInfo) {
          console.log("Failed:", errorInfo);
        }
      },
    };
    //
    return {
      ...refData,
      ...methods,
      formRef,
    };
  },
};
</script>
<style lang="scss" scoped>
.contact-section {
  padding: 100px 0;

  h3 {
    font-size: 55px;
    font-weight: 600;
    padding-bottom: 30px;
    color: #38789e;
    text-transform: uppercase;
  }

  p.addr1 {
    font-size: 1rem;
    font-weight: normal;
    padding-bottom: 10px;
  }

  p.addr2 {
    font-size: 1rem;
    font-weight: normal;
    padding-bottom: 10px;
  }

  ul.social-icons2 {
    padding: 20px 0 40px;

    // li {
    //   display: inline-block;
    //   margin-right: 10px;

    //   a i {
    //     vertical-align: middle;
    //     text-align: center;
    //     color: #000;
    //     font-size: 20px;
    //     transition: 0.5s all;
    //     -webkit-transition: 0.5s all;
    //     -moz-transition: 0.5s all;
    //     -o-transition: 0.5s all;
    //     -ms-transition: 0.5s all;
    //   }
    // }

    li {
      display: inline-block;
      font-size: 1rem;
      width: 2.5rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      color: #fff;
      border-radius: 100%;
      margin-right: 15px;

      a i {
        vertical-align: middle;
        text-align: center;
        font-size: 1.25rem;
        transition: 0.5s all;
        -webkit-transition: 0.5s all;
        -moz-transition: 0.5s all;
        -o-transition: 0.5s all;
        -ms-transition: 0.5s all;
      }
    }
  }

  ::v-deep .ant-form-item {
    padding: 0 15px;

    input,
    textarea {
    }

    .ant-form-item-control-input-content {
      border: 2px solid #000;
      border-radius: 0px;
      font-weight: 700;
      color: #000;
      text-transform: capitalize;
      // font-size: 16px;

      .ant-input-affix-wrapper {
        font-size: 16px;
        color: #000;
        padding: 16px 10px 16px 10px;
        .ant-input-prefix {
          margin-right: 10px;
          i {
            font-size: 1.25rem;
          }
        }

        input {
          font-size: 16px;
          font-weight: 700;
          color: #000;
        }
      }

      textarea {
        padding: 16px 10px 16px 10px;
        font-size: 16px;
        color: #000;
      }
    }
  }

  .btn-outline2 {
    margin-top: 74px;
    border: none;
    outline: none;
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    background: #136eb4;
    transition: all 0.3s ease-in-out;
    padding: 11px 50px;
    font-size: 1rem;

    border-radius: 10px;
    -webkit-border-radius: 10px;
  }
}
</style>
